const vm = new Vue({
    el: '#app',
    data: {
        multipleSelection: [],
        orders: [],
        tableStyle: {
            width: document.body.clientWidth + 'px'
        },
        height: document.body.clientHeight - 70 - 32,
        currentPage: 0,
        pageSize: 0,
        total: 0,
        searchForm: {
            keyword: ''
        },
        staffFieldVisible: false,
        workloadVisible: false,
        workloadTips: '',
        dialogAddOrderFormVisible: false,
        dialogfollowStateFormVisible: false,
        followStateForm: {
            id: '',
            followState: ''
        },
        orderAddForm: {
            name: '',
            sex: '',
            age: '',
            dadPhone: '',
            momPhone: '',
            followState: '',
            contactDate: '',
            homeAddress: '',
            notes: '',
        },
        rulesAddOrder: {
            name: [
                { required: true, message: '请输入姓名', trigger: 'blur' },
                { min: 2, max: 12, message: '长度在 2 到 12 个字符', trigger: 'blur' }
            ],
            sex: [
                { required: true, message: '请选择性别', trigger: 'change' }
            ],
            age: [
                { required: true, message: '请输入年龄', trigger: 'blur' }
            ],
            dadPhone: [
                { required: true, message: '请输入爸爸手机', trigger: 'blur' }
            ],
            momPhone: [
                { required: true, message: '请输入妈妈手机', trigger: 'blur' }
            ],
            followState: [
                { required: true, message: '请输入跟进状态', trigger: 'blur' }
            ],
            contactDate: [
                { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
            ],
            homeAddress: [
                { required: true, message: '请输入家庭住址', trigger: 'blur' }
            ]
        }
    },
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        handleRowClick(row, column, cell, event) {
            if ('跟进状态' === column.label) {
                this.dialogfollowStateFormVisible = true;
                this.followStateForm.id = row.id;
                this.followStateForm.followState = cell.innerText;
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        submitAddOrderForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('添加成功！');
                    this.dialogAddOrderFormVisible = false;
                    this.$refs[formName].resetFields();
                } else {
                    console.log('没有添加成功');
                    return false;
                }
            });
        },
        submitfollowStateForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.dialogfollowStateFormVisible = false;
                    for (let index = 0; index < this.orders.length; index++) {
                        const element = this.orders[index];
                        if (element.id === this.followStateForm.id) {
                            this.orders[index].followState = this.followStateForm.followState;
                        }
                    }
                } else {
                    console.log('没有修改成功');
                    return false;
                }
            });
        }
    }
});

window.addEventListener('resize', () => {
    vm.tableStyle.width = document.body.clientWidth + 'px';
    vm.height = document.body.clientHeight - 70 - 32;
})